<template>
  <a-menu
    class="layout-menu"
    v-model:selectedKeys="state.selectedKeys"
    :open-keys="state.openKeys"
    @click="menuClick"
    mode="inline"
    @openChange="(openKeys)=> onOpenChange(openKeys as string[])"
    :items="menuList">
  </a-menu>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { MenuInfo } from 'ant-design-vue/es/menu/src/interface'
  import { findAncestorsWithSameProperty } from '@/utils/tools'
  import useGetMenuList from './useGetMenuList'
  const { menuList } = useGetMenuList()

  interface propsInterface {
    accordion: boolean
  }
  const props: propsInterface = defineProps({
    // 是否开启手风琴,只对一级菜单有效
    accordion: {
      type: Boolean,
      default: true
    }
  })

  const router = useRouter()
  // 菜单点击事件
  const menuClick = ({ item, key }: MenuInfo) => {
    router.push({
      name: item.name
    })

    if (state.rootSubmenuKeys.includes(key)) {
      onOpenChange([])
    }
  }

  // 监听路由跳转变化 调整选中状态和菜单折叠状态
  const route = useRoute()
  watch(
    () => route.name,
    newVal => {
      state.selectedKeys = [newVal]
      if (state.rootSubmenuKeys.includes(newVal)) {
        onOpenChange([])
      }
    }
  )

  const state: any = reactive({
    selectedKeys: [],
    rootSubmenuKeys: [],
    openKeys: []
  })

  // 初始化默认选中的菜单
  onMounted(() => {
    const initSelectedKeys = router.currentRoute.value.name
    state.selectedKeys = [initSelectedKeys]
    state.rootSubmenuKeys = menuList.value?.map((item: any) => {
      return item?.key
    })
    state.openKeys = findAncestorsWithSameProperty(menuList.value as [], 'name', initSelectedKeys)
  })

  const onOpenChange = (openKeys: string[]) => {
    // 是否关闭手风琴
    if (!props.accordion) return
    const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1)
    if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      state.openKeys = openKeys
    } else {
      state.openKeys = latestOpenKey ? [latestOpenKey] : []
    }
  }
</script>

<style lang="less" scoped>
  @menuItemHeight: 48px;
  .layout-menu {
    color: hsla(0, 0%, 24%, 1);
    background: transparent;
    border-inline-end: 0px !important;
    // :deep() {
    :deep(.ant-menu-item) {
      width: 100%;
      height: @menuItemHeight;
      line-height: @menuItemHeight;
      margin-inline: 0px;
      margin-block: 0px;
      border-radius: 0px;
    }
    :deep(.ant-menu-item:not(.ant-menu-item-selected):hover) {
      color:  #4CC87E !important;
      background-color: rgba(237, 250, 241, 1) !important;
    }

    :deep(.ant-menu-submenu) {
      .ant-menu-submenu-title {
        width: 100%;
        height: @menuItemHeight !important;
        line-height: @menuItemHeight !important;
        margin-inline: 0px;
        margin-block: 0px;
        border-radius: 0px;
        .ant-menu-title-content {
          &:hover {
            background-color: transparent !important;
          }
        }
      }
      .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected) {
        color: #4CC87E !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
      }
    }

    :deep(.ant-menu-submenu-selected) > .ant-menu-submenu-title {
      background: rgba(76, 201, 113, 1);
      color:rgba(255, 255, 255, 1) !important;
    }
    :deep(.ant-menu-item-selected) {
      color:rgba(49, 188, 99, 1);
      background-color: rgba(237, 250, 241, 1) !important;
    }
    :deep(.ant-menu-sub) {
      background-color: #fff !important;
    }
    // }
  }
</style>
